<template>
  <div class="add-goods">
    <!-- 面包屑 -->
    <div class="title">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/goods' }"
          >商品管理</el-breadcrumb-item
        >
        <el-breadcrumb-item>添加商品</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 内容区域 -->
    <el-form
      :model="goodsForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="类目选择" prop="category">
        <el-button type="primary" @click="innerVisible = true"
          >类目选择</el-button
        >
        <span style="margin-left: 10px">{{ goodsForm.category }}</span>
      </el-form-item>

      <el-form-item label="商品名称" prop="title">
        <el-input v-model="goodsForm.title"></el-input>
      </el-form-item>
      <el-form-item label="商品价格" prop="price">
        <el-input v-model="goodsForm.price"></el-input>
      </el-form-item>
      <el-form-item label="商品数量" prop="num">
        <el-input v-model="goodsForm.num"></el-input>
      </el-form-item>
      <el-form-item label="发布时间" required>
        <el-col :span="11">
          <el-form-item prop="date1">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="goodsForm.date1"
              style="width: 100%"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col class="line" :span="2">-</el-col>
        <el-col :span="11">
          <el-form-item prop="date2">
            <el-time-picker
              placeholder="选择时间"
              v-model="goodsForm.date2"
              style="width: 100%"
            ></el-time-picker>
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item label="商品卖点" prop="sellPoint">
        <el-input v-model="goodsForm.sellPoint"></el-input>
      </el-form-item>
      <el-form-item label="商品图片" prop="image">
        <el-button type="primary" @click="innerVisibleImg = true"
          >上传图片</el-button
        >
        <img
          :src="goodsForm.image"
          height="200px"
          style="margin-left: 10px"
          alt=""
        />
      </el-form-item>
      <el-form-item label="商品描述" prop="descs">
        <WangEditor ref="myEditor" @sendEditor="sendEditor" />
      </el-form-item>
      <!-- 规格参数配置 -->
      <el-form-item label="规格参数配置" v-show="isShow">
        <el-form
          ref="dynamicValidateForm"
          label-width="120px"
          class="demo-dynamic"
        >
          <el-form-item
            v-for="(item, index) in groups"
            :label="item.title"
            :key="index"
            :prop="item.value"
          >
            <el-input v-model="item.value"></el-input>
            <!-- 内层的表单项 -->
            <el-form-item
              v-for="(ele, i) in item.children"
              :label="ele.title"
              :key="i"
              :prop="ele.value"
            >
              <el-input v-model="ele.value"></el-input>
            </el-form-item>
          </el-form-item>
        </el-form>
      </el-form-item>
    </el-form>

    <!-- 底部区域 -->
    <span slot="footer" >
    <router-link to="/goods" ><el-button @click="clearForm">取 消</el-button></router-link>
    <router-link to="/goods" ><el-button type="primary" @click="submitForm" style="margin-left:15px">确 定</el-button></router-link>
    </span>

    <!-- 1. 内弹框--- 类目选择 -->
    <el-dialog
      width="40%"
      title="类目选择"
      :visible.sync="innerVisible"
      append-to-body
    >
      <TreeGoods @sendTreeData="sendTreeData" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="innerVisible = false">取 消</el-button>
        <el-button type="primary" @click="showTreeData">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 2. 内弹框 --- 上传图片 -->
    <el-dialog
      width="40%"
      title="上传图片"
      :visible.sync="innerVisibleImg"
      append-to-body
    >
      <UploadImg @sendImg="sendImg" ref="upload" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="innerVisibleImg = false">取 消</el-button>
        <el-button type="primary" @click="showImg">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import TreeGoods from "./TreeGoods.vue";
import UploadImg from "./UploadImg.vue";
import WangEditor from "./WangEditor.vue";
export default {
  props: {
    rowData: {
      type: Object,
      default: function () {
        return {};
      },
    },
  },
  components: {
    TreeGoods,
    UploadImg,
    WangEditor,
  },
  data() {
    return {
      isShow: false, //是否显示规格参数配置
      innerVisible: false, //内弹框
      innerVisibleImg: false, //图片弹框
      treeData: {}, //接受tree数据
      imgUrl: "",
      goodsForm: {
        //表单容器-对象
        id: "",
        title: "", //商品名称
        price: "",
        num: "",
        sellPoint: "",
        image: "",
        descs: "",
        cid: "", //类目的id
        category: "", //商品类目
        date1: "", //商品时间
        date2: "", //商品时间
      },
      groups: [], //规格参数
      rules: {
        //校验规则
        title: [
          { required: true, message: "请输入商品名称", trigger: "blur" },
          { min: 2, max: 8, message: "长度在 2 到 8 个字符", trigger: "blur" },
        ],
        price: [{ required: true, message: "请输入价格", trigger: "blur" }],
        num: [{ required: true, message: "请输入数量", trigger: "blur" }],
      },
    };
  },
  methods: {
    /**
     * 接受wangeditor数据
     */
    sendEditor(val) {
      this.goodsForm.descs = val;
    },
    /**
     * 显示图片的地址
     */
    sendImg(val) {
      console.log("显示图片的地址", val);
      this.imgUrl = val;
    },
    /**
     * 显示图片--确定按钮
     */
    showImg() {
      this.innerVisibleImg = false;
      this.goodsForm.image = this.imgUrl;
      //清空图片上传的列表
      this.$refs.upload.fileList = [];
    },
    /**
     * 显示tree数据
     */
    showTreeData() {
      this.innerVisible = false;
      //显示tree数据
      this.goodsForm.category = this.treeData.name;
      this.goodsForm.cid = this.treeData.cid;
      //显示规格参数--- 获取--------------
      // this.isShow = true;
      this.$api
        .categoryData({
          cid: this.treeData.cid,
        })
        .then((res) => {
          console.log("显示规格参数--- 获取-", res.data);
          if (res.data.status === 200) {
            //有类目规格配置参数-------------
            this.isShow = true;
            //存储规格参数
            let result = res.data.result[res.data.result.length - 1];
            console.log(result.paramData);
            this.groups = JSON.parse(result.paramData);
          } else {
            this.isShow = false;
          }
        });
    },
    /**
     * 获取tree数据
     */
    sendTreeData(val) {
      console.log("tree数据", val);
      this.treeData = val;
    },
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          console.log("获取输入的信息", this.goodsForm);
          console.log("规格参数配置信息", this.groups);
          //title cid  category sellPoint price num descs paramsInfo image
          let {
            title,
            cid,
            category,
            sellPoint,
            price,
            num,
            descs,
            image,
            id,
          } = this.goodsForm;
            console.log("添加商品");
            this.$api
              .addGoods({
                title,
                cid,
                category,
                sellPoint,
                price,
                num,
                descs,
                image,
                paramsInfo: JSON.stringify(this.groups),
              })
              .then((res) => {
                console.log("添加---实现---", res.data);
                if (res.data.status === 200) {
                  //成功
                  this.$parent.http(1); //更新父组件列表数据
                  this.$message({
                    message: "恭喜你，添加商品成功",
                    type: "success",
                  });
                  //清空表单
                  this.clearForm();
                } else {
                  this.$message.error("错了哦，这是一条错误消息");
                }
              });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    /**
     * 清空表单数据列表
     */
    clearForm() {
      // location.href() //1.跳转回商品列表
      // 清空表单  1 使用element里面的重置表单  2 自己手动初始化goodsForm
      // this.$refs.ruleForm.resetFields();
      this.goodsForm = {
        title: "", //商品名称
        price: "",
        num: "",
        sellPoint: "",
        image: "",
        descs: "",
        cid: "", //类目的id
        category: "", //商品类目
        date1: "", //商品时间
        date2: "", //商品时间
      };
      //单独-清空编辑器内容--editor.txt.clear()
      this.$refs.myEditor.editor.txt.clear();
      //清空规格参数
      this.groups = [];
      this.isShow = false;
    },
  },
};
</script>

<style lang='less' scoped>
.add-goods {
  margin: 20px;
}
.title {
  padding: 10px;
  background: #fff;
  border: 1px solid #eee;
  margin-bottom: 20px;
}
.myform {
  background: #fff;
  padding: 10px;
  padding-right: 30px;
}
.line {
  text-align: center;
}
</style>
<style >
.el-picker-panel {
  z-index: 10001 !important;
}
.el-popper {
  z-index: 10001 !important;
}
</style>